<template>
	<view class='comments-pop'>
		<view>
			<titlebara mode="动态" :back="true" :text="text" backgroundColor='#ffffff'>
				<view slot="title">

					<!-- #ifdef APP-PLUS||H5 -->
					<image class="showMore" mode='aspectFit' v-if="currentUserPhone == userInfo.phone"
						src="https://dnsverify.pfmoto.com/appstatic/community/more.png"
						@click="showMore" />
					<image class="showMore" mode='aspectFit' v-else
						src="https://dnsverify.pfmoto.com/appstatic/community/share.png"
						@click="shareAction" />
					<view class="titleText">{{text}}</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<image class="showMore" mode='aspectFit' v-if="currentUserPhone == userInfo.phone"
						src="https://dnsverify.pfmoto.com/appstatic/community/more.png" @click="showMore"/>
						<view class="titleText">{{text}}</view>
						<!-- #endif -->
				</view>
			</titlebara>

		</view>
		<z-paging ref="paging" v-model="commentList" @query="loadCommentList" :fixed="true" :auto="false">



			<view :style="'margin-top:'+ navigationBarHeight">
				<card :communtyList="communtyList" type="detail" ref='refresh' :loginId="loginId"> </card>
			</view>

			<view class='pop-con' v-if="commentList.length">

				<view class='hot-com' v-if="commentList.length>=3&&hotList">
					<view class='com-title'>最热评论</view>
					<view class='com-list'>
						<view class='l-first'>
							<image class="header-img" mode='aspectFit' @error="imgerror($event, 0,'hot')"
								:src="hotList.firstComment.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
							</image>
							<view class='list-con'>

								<view class='list-name'
									v-if="hotList.firstComment.wechatName==''||hotList.firstComment.wechatName==null">
									<view
										v-if="hotList.firstComment.phone==null||hotList.firstComment.phone==undefined">
										已注销用户
									</view>
									<view v-else>
										{{hotList.firstComment.phone.substr(0, 3) + '*****' + hotList.firstComment.phone.substr(8)}}
									</view>
								</view>
								<view class='list-name' v-else>{{hotList.firstComment.wechatName}}</view>




								<view class='list-content' @click="selectCommpent(hotList.firstComment,1)">
									{{hotList.firstComment.content}}
								</view>
								<image @click="previewImage(hotList.firstComment.picture)"
									v-if="hotList.firstComment.picture" class='list-img' mode='widthFix'
									:src="hotList.firstComment.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
								</image>
								<view class='list-num'>
									<text>{{hotList.firstComment.createTime | timeFrom}}</text> <text
										v-if="hotList.firstComment.secondCount>0">共{{hotList.firstComment.secondCount||0}}条回复</text>
								</view>

							</view>
							<view class='like-box' @click="thumbCommuntyTouched(hotList.firstComment)">
								<image class='like-img' v-if="hotList.firstComment.isThumbs"
									src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
									mode="aspectFill">
								</image>
								<image class='like-img' v-else
									src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
									mode="aspectFill">
								</image>
								<view class='like-num'>{{hotList.firstComment.thumbsNum||0}}</view>
							</view>
						</view>
						<view class="" v-if="hotList.secondComments&&hotList.secondComments.length>0">
							<view class='l-first sub' v-for="(k,index) in hotList.secondComments" :key="index">
								<image class="header-img" mode='aspectFit'
									:src="k.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
								</image>
								<view class='list-con'>
									<!-- <view class='list-name'>{{k.userName}}</view> -->
									<view class='list-name' v-if="k.wechatName==''|| k.wechatName == null  ">
										<view v-if="k.phone==null||k.phone==undefined">
											已注销用户
										</view>
										<view v-else>
											{{k.phone.substr(0, 3) + '*****' + k.phone.substr(8)}}
										</view>
									</view>
									<view class='list-name' v-else>{{k.wechatName}}
									</view>


									<view class='list-content' @click="selectComment2(k,1)">{{k.content}}</view>
									<image @click="previewImage(k.picture)" v-if="k.picture" class='list-img'
										mode='widthFix'
										:src=" k.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
									</image>
									<view class='list-num'>{{k.createTime | timeFrom}}</view>
									<view class="more-comment" v-if="hotList.firstComment.secondCount>1 || hotList.thirdComments.length>0"
										@click="enterCommentDetail(hotList.firstComment)">
										查看全部回复
									</view>
								</view>
								<view class='like-box' @click="thumbCommuntyTouched(k)">
									<!-- 	<image  class='like-img' mode='widthFix'
								src='https://dnsverify.pfmoto.com/appstatic/community/ac-1.png'></image> -->

									<image class='like-img' v-if="k.isThumbs"
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
										mode="aspectFill">
									</image>
									<image class='like-img' v-else
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
										mode="aspectFill">
									</image>




									<view class='like-num'>{{k.thumbsNum||0}}</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class='new-com' v-if="commentList.length>0">
					<view class='com-title'>最新评论</view>
					<view class='com-list' v-for="(item,index) in commentList" :key="index">
						<view class='l-first'>
							<image class="header-img" mode='aspectFit' @error="imgerror($event, index,'new')"
								:src="item.firstComment.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
							</image>
							<view class='list-con'>

								<!-- 	<view class='list-name'>{{item.firstComment.userName}}</view> -->

								<view class='list-name'
									v-if="item.firstComment.wechatName==''|| item.firstComment.wechatName == null  ">
									<view v-if="item.firstComment.phone==null||item.firstComment.phone==undefined">
										已注销用户
									</view>
									<view v-else>
										{{item.firstComment.phone.substr(0, 3) + '*****' + item.firstComment.phone.substr(8)}}
									</view>
								</view>
								<view class='list-name' v-else>{{item.firstComment.wechatName}}</view>



								<view class='list-content' @click="selectCommpent(item.firstComment,1)">
									{{item.firstComment.content}}
								</view>
								<image @click="previewImage(item.firstComment.picture)" v-if="item.firstComment.picture"
									class='list-img' mode='widthFix'
									:src="item.firstComment.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
								</image>
								<view class='list-num'><text>{{item.firstComment.createTime | timeFrom}}</text>
									<text
										v-if="item.firstComment.secondCount>0">共{{item.firstComment.secondCount}}条回复</text>
								</view>

							</view>
							<view class='like-box' @click="thumbCommuntyTouched(item.firstComment)">
								<image class='like-img' v-if="item.firstComment.isThumbs ==1"
									src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
									mode="aspectFill">
								</image>
								<image class='like-img' v-else
									src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
									mode="aspectFill">
								</image>
								<view class='like-num'>{{item.firstComment.thumbsNum||0}}</view>
							</view>
						</view>
						<view class="" v-if="item.secondComments&&item.secondComments.length>0">
							<view class='l-first sub' v-for="(k,indexx) in item.secondComments" :key="indexx">
								<image class="header-img" mode='aspectFit'
									:src="k.userimages||'https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png'">
								</image>
								<view class='list-con'>
									<!-- <view class='list-name'>{{k.userName}}</view> -->
									<view class='list-name' v-if="k.wechatName==''||k.wechatName==null">
										<view v-if="k.phone==null||k.phone==undefined">
											已注销用户
										</view>
										<view v-else>
											{{k.phone.substr(0, 3) + '*****' + k.phone.substr(8)}}
										</view>
									</view>
									<view class='list-name' v-else>{{k.wechatName}}</view>

									<view class='list-content' @click="selectComment2(k,1)">{{k.content}}</view>
									<image @click="previewImage(k.picture)" v-if="k.picture" class='list-img'
										mode='widthFix'
										:src=" k.picture||'https://dnsverify.pfmoto.com/appstatic/community/item-img.png'">
									</image>
									<view class='list-num'>{{k.createTime| timeFrom}} </view>
									<view class="more-comment" v-if="item.firstComment.secondCount>1 || item.thirdComments.length>0"
										@click="enterCommentDetail(item.firstComment)">
										查看全部回复
									</view>
								</view>
								<view class='like-box' @click="thumbCommuntyTouched(item.secondComments[0])">


									<image class='like-img' v-if="item.secondComments[0].isThumbs"
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
										mode="aspectFill">
									</image>
									<image class='like-img' v-else
										src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png"
										mode="aspectFill">
									</image>
									<view class='like-num'>{{item.secondComments[0].thumbsNum||0}}</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view slot="bottom">
				<!-- 评论输入框 -->


				<u-popup :show="show">
					<view class="popup">
						<view class="action-wraper">
							<text style="visibility: hidden;">确定</text>
							<text>分享到</text>
							<image @click="show = !show"
								src="https://dnsverify.pfmoto.com/appstatic/community/x.png" mode="">
							</image>
						</view>
						<view class="share-wraper">
							<view class="item" @click="shareType(1)">
								<image src="https://dnsverify.pfmoto.com/appstatic/community/share-1.png"
									mode="">
								</image>
								<text>微信</text>
							</view>
							<view class="item" @click="shareType(2)">
								<image src="https://dnsverify.pfmoto.com/appstatic/community/share-2.png"
									mode="">
								</image>
								<text>朋友圈</text>
							</view>
							<view class="item" @click="shareType(3)">
								<image src="https://dnsverify.pfmoto.com/appstatic/community/share-3.png"
									mode="">
								</image>
								<text>微博</text>
							</view>
						</view>

					</view>

				</u-popup>


				<showMoreView :isShowMore="isShowMore" @shareAction="shareAction" @deleteAction="deleteAction">
				</showMoreView>

				<clxDialog :isShow='showDelete' @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'
					:title="title">
				</clxDialog>
			</view>
		</z-paging>
		<InputPanel :commentType="commentType" :commentInfo="commentInfo" :placeholder="placeholder" :replyLevel="replyLevel"
			@changeHolder="changeHolder" @createComment="createCommentResult" :total="total"
			:itemValue="communtyList[0]"  ref='InputPanel' />
	</view>

</template>

<!-- <script module="util" lang="wxs" src="@utils/util.wxs"></script> -->

<script>
	// pages/sns/sns_detail_sns/sns_detail_sns.js
	import card from "@components/card/card";
	import showMoreView from '@/components/showMoreView';
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("@utils/dialog.js");
	import UploadView from '@components/UploadView/UploadView.vue'
	import titlebara from '@/components/titlebar/titlebar'
	import clxDialog from "@/components/clx-dialog/clx-dialog";
	import InputPanel from '@/components/inputPanel/inputPanel.vue'
	const dateForCalendar = require("@utils/dateForCalendar.js");
	export default {
		data() {
			return {
				loginId: '',
				flag: false,
				text: '动态',
				isShowMore: false,
				title: '确认删除该条动态?',
				showDelete: false,
				hotList: [],

				show: false,
				selector: ['拍摄', '从手机相册选择'],
				detail: {},
				isOk: false,
				swiperCurrent: 0,
				commentList: [],
				communtyList: [],
				myComment: '',
				comment: '',
				commentInfo: {},
				commentType: 0,
				placeholder: "说点什么",
				imageConfig: '?x-oss-process=image/resize,m_lfit,w_410/quality,q_100',
				pagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 20,
					length: 100
				},
				fileList: [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}],
				uuid: '',
				currentUserPhone: '',
				navigationBarHeight: app.globalData.statusBarHeight + 44 + 'px',
				total: 0,
				pagingHeight: '1600rpx',
				userInfo: app.globalData.userInfo||{phone:''},
				
				replyLevel:'',
			};
		},

		components: {
			clxDialog,
			titlebara,
			UploadView,
			card,
			showMoreView,
			InputPanel
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options && options.id) {
				this.loadDetail(options.id);
				this.uuid = options.id
			}
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'getSystemInfo');
					var navigationBarHeight = res.statusBarHeight + 44 + 'px'; //px
				}
			})
			//更新已读
			if (options && options.id && (options.from == "message" || options.from == "notice") && options.myId) {
				this.update2Read(options.id, options.myId,options.from);
			}
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.loginId = app.getUserId()
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.loadData(true);
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},


		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage(res) { //发送给朋友
			return {}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {}
		},

		methods: {
			selectOriginal(){
				this.changeHolder('说点什么')
			},
			createCommentResult(val) {
				
				let info = {
					content: val.content,
					picture: val.picture,
					isThumbs:0,
					thumbsNum:0,
					createTime: dateForCalendar.yearTime('yearTime', new Date()),
					wechatName: app.globalData.userInfo.wechatName ? app.globalData.userInfo.wechatName : app
						.globalData.userInfo.phone.substr(0, 3) + '*****' + app.globalData.userInfo.phone.substr(8),
					userimages: app.globalData.userInfo.userimages,
					uuid: val.id
				}
				this.commentList.map(item => {
					console.log(item.firstComment.uuid,val.pid)
					if (item.firstComment.uuid == val.pid) {
						item.secondComments.splice(0, 1, info)
						item.firstComment.secondCount = item.firstComment.secondCount + 1
					}
				})

				if (this.hotList.firstComment.uuid == val.pid) {
					this.hotList.secondComments.splice(0, 1, info)
					this.hotList.firstComment.secondCount = this.hotList.firstComment.secondCount + 1
				}

				if (this.uuid == val.pid) {
					var obj = {
						firstComment: info,
						secondComments: []
					}
					if (this.commentList.length > 0) {
						this.commentList.splice(0, 0, obj)
					} else {
						this.commentList.push(obj)
					}

				}

			},
			changeHolder(val) {
				this.placeholder = val
				// this.commentInfo.uuid = ''
			},
			//更新已读
			update2Read: function(id, myId,from) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY;
				var params = {
					// "id": id,
					"id": myId,
					"isType": 2
				};
				network.post(uri, params, 'json').then(res => {
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						if(from=='message'){
							//回调上一个页面
							let pages = getCurrentPages();
							if (pages.length == 3) {
								let prePage = pages[pages.length - 2];
								let preprePage = pages[pages.length - 3]
							
								// prePage.refresh(myId);
								// preprePage.refresh();
								// #ifdef H5
								prePage.refresh(myId);
								preprePage.refresh();
								// #endif
								// #ifdef APP-PLUS
								prePage.$vm.refresh(myId);
								preprePage.$vm.refresh();
								// #endif
							}
						}else{
							let pages = getCurrentPages();
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh(myId);
							// #endif
							// #ifdef APP-PLUS
							prePage.$vm.refresh(myId);
							// #endif
						}
						
						util.syncBadge(getApp())
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			showMore() {
				this.isShowMore = !this.isShowMore;

			},
			shareType(type) {

				var that = this
				var url = "https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/community/share.jpg";
				if (this.communtyList.imgList && this.communtyList.imgList.length > 0) {
					url = this.communtyList.imgList[0]+"?x-amz-process=image/resize,w_500";
				}
				if (type == 1) {




					uni.share({
						provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
						scene: "WXSceneSession", //分享到聊天界面
						type: 5, //分享形式 5:小程序
						imageUrl: that.communtyList[0].imgList[0]||url, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
						title: that.communtyList[0].content,
						miniProgram: {
							id: 'gh_c784b84e778d', //微信小程序原始id
							path: 'module_community/pages/moments/detail/detail?id=' + this.communtyList[0].id,
							type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
							webUrl: 'https://www.pfmoto.com/app' //兼容低版本的网页链接
						},
						success: ret => {
							console.log(JSON.stringify(ret));
						},
						fail: ret => {
							console.log("fail" + JSON.stringify(ret));
						}
					});

				} else if (type == 2) {

					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						href: "https://www.pfmoto.com/app",
						title:that.communtyList[0].content,
						summary: '欢迎体验派方机车',
						imageUrl: that.communtyList[0].imgList[0]||url,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (type == 3) {
					uni.share({
						provider: "sinaweibo",
						title: '欢迎下载派方APP',
						summary: that.communtyList[0].content,
						imageUrl: '', //官方规定分享图比例是5：4,其它尺寸可能显示不全。
						href: 'https://www.pfmoto.com/app',
						type: 0,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));

						},
						fail: function(err) {
							uni.showToast({
								title: JSON.stringify(err),
								duration: 3000,
								icon: 'none'
							})

						}
					});

				}
				this.show = false
			},
			//展示删除弹窗
			deleteAction: function() {
				if (util.isLogin(getApp())) {
				
					if (this.currentUserPhone == app.globalData.userInfo.phone) {
						this.showDelete = true

					} else {
						uni.showToast({
							title: '只能删除自己的动态',
							duration: 3000,
							icon: 'none'
						})
					}
					this.isShowMore = false
				} else {
					uni.setStorageSync('momentDetailId', this.uuid)
					util.jumpLogin("momentDetail")
				}


			},
			//删除弹窗-确定按钮
			dialogConfirm(e) {
				this.showDelete = false
				this.onConfirmDelete()
			},
			enterCommentDetail(row) {
				uni.navigateTo({
					url: '/module_community/pages/moments/list/list?from=moment&row=' + JSON.stringify(row)
				})
			},
			//删除弹窗-取消按钮
			dialogCancel() {
				this.showDelete = false
				this.delItem = ""
			},
			//确认删除方法
			onConfirmDelete() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_DEL_PERSONAL_COMMUNITY + '?id=' + this.uuid +
					'&key=2&value=1';
				var params = {


				};
				network.post(uri, params, 'form').then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功',
							duration: 3000,
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					console.error(res, 'err')
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);

				});
			},
			shareAction(type) {
				if (util.isLogin(getApp())) {
					this.isShowMore = false
					this.show = true
					// uni.showToast({
					// 	title: '待开放平台权限申请',
					// 	duration: 3000,
					// 	icon: 'none'
					// })

				} else {
					uni.setStorageSync('momentDetailId', this.uuid)
					util.jumpLogin("momentDetail")
				}




			},
			selectMedia() {
				var that = this
				uni.showActionSheet({
					itemList: that.selector,
					success: function(res) {
						that.confirm(res.tapIndex + 1)

					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},

			confirm(e) {
				if (this.fileList.length == 2) {
					uni.showToast({
						title: '最多1张图',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				console.log(this.fileList[0].mediaType)
				var index = this.fileList.length - 1;
				// this.selectComponent('#uploadView' + index).upload(e)
				this.$refs['uploadView' + index][0].upload(e)
			},
			uploading(item) {

				//to do 上传视频只能上传一个限制
				if (item.mediaType == 'video') {
					return
				}
				console.log('巴拉巴拉')
				// this.fileList.push(item)
				this.fileList.push({
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				})
			},
			uploadSuccess(item) {
				uni.hideLoading()
				console.log(item, 'uploadSuccess,uploadSuccess');
				if (this.myComment == '' && this.fileList.length == 1) {
					// this.isOk = false

				} else {
					// this.isOk = true
				}

				this.fileList[0].url = item.url
				// this.fileList.findIndex(x => x.uuid === item.uuid).url = item.url;

			},
			uploadError(item) {

				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
			},
			uploadDelete(item) {

				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
				if (item.mediaType == 'video') {
					this.fileList.push({
						type: 0,
						mediaType: 'add',
						url: '',
						path: '',
						uuid: util.createUidKey()
					})
				}
			},
			swiperChange: function(e) {
				this.setData({
					swiperCurrent: e.detail.current
				});
			},
			/**
			 * 用户点击右上角分享
			 */
			onNavigationBarButtonTap: function(e) {
				// this.show = true
				// this.shareAction()
				this.showMore()
			},



			loadDetail: function(id) {
				var that = this;

				var uri = app.globalData.config.interfaces.URL_COMMUNTIY_DETAIL;
				var params = {
					"id": id,
					"loginId": app.getUserId()
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.detail = res.data
						that.currentUserPhone = res.data.phone
						
						that.communtyList = []
						that.communtyList.push(res.data)
						// this.$set(that, 'communtyList', that.communtyList);
						that.$refs.refresh.setData(that.communtyList);
						that.total = res.data.commentNum

						that.loadData(true);
						that.$nextTick(() => {
							that.$refs.paging.reload();
						})
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			/**
			 * 预览图片  
			 */
			previewImage: function(img) {

				//#ifndef MP-WEIXIN
				wx.previewImage({
					current: 0,
					urls: [img],
				});
				//#endif
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			loadData: function(isRefresh) {


				this.loadHotCommenyList()
				// this.loadCommentList(isRefresh);
			},
			selectCommpent(item, type) {
				this.commentType = type
				this.commentInfo = item
				var name = item.wechatName || item.phone
				this.placeholder = "回复@" + name + ':'
			},
			selectComment2(item, type){//点击二级
				this.replyLevel='2'
				this.commentType = type
				this.commentInfo = item
				var name = item.wechatName || item.phone
				this.placeholder = "回复@" + name + ':'
			},
			commentTouched() {

				if (util.isLogin(getApp())) {
					if (this.flag) {
						return
					}

					var that = this
					console.log("最多输入100字" + that.comment.length)
					if (that.comment.length > 100) {
						uni.showToast({
							title: '最多输入100字',
							duration: 3000,
							icon: 'none'
						})
						return
					}
					if (that.comment.length == 0) {
						uni.showToast({
							title: '请输入评论内容',
							duration: 3000,
							icon: 'none'
						})
						return
					}
					var uri = app.globalData.config.interfaces.ULR_COMMUNTITY_COMMENT;
					var id = that.detail.id
					var commentType = 0

					if (that.commentInfo.uuid) {
						console.log()
						id = that.commentInfo.uuid
						commentType = that.commentType

					}
					var pictureurl = ""
					if (that.fileList.length > 0 && (that.fileList[0].url != null && that.fileList[0].url != undefined)) {
						pictureurl = that.fileList[0].url
					}

					var params = {
						"communityId": that.detail.id,
						"pid": id,
						"commentType": commentType,
						"authorId": app.getUserId(),
						"isfrom": 2,
						"content": that.comment,
						"picture": pictureurl
					};
					this.flag = true
					network.post(uri, params, 'json').then(res => {
						if (res.code == 200) {

							// this.loadCommentList(true)
							// this.loadHotCommenyList()
							that.comment = ""
							that.fileList = []
							var add = {
								type: 0,
								mediaType: 'add',
								url: '',
								path: '',
								uuid: util.createUidKey()
							}
							that.fileList.push(add)

							that.placeholder = "说点什么";
							that.loadData(true);

						} else {

							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
						that.flag = false
					}).catch(res => {

						that.flag = false
					});
				} else {
					uni.setStorageSync('momentDetailId', this.uuid)
					util.jumpLogin("momentDetail")
				}

			},

			loadHotCommenyList() {

				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMENT_HOT;
				var params = {
					"pageNum": that.pagination.page,
					"pageSize": that.pagination.limit,
					"id": this.detail.id,
					"loginId": app.getUserId() || ""
				};
				network.get(uri, params, 'form').then(res => {


					if (res.code == 200) {
						that.hotList = res.data

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})

				});
			},
			loadCommentList(pageNo, pageSize) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMENT_LIST;
				var params = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"id": this.detail.id,
					"loginId": app.getUserId() || ""
				};

				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						var _list = res.data.list;
						that.$refs.paging.complete(_list)
						if (_list.length > 5) {
							that.pagingHeight = '1200rpx'
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			//点赞社区动态
			thumbCommuntyTouched: function(item) {
				var that =this
				if (util.isLogin(getApp())) {
					
					var uri = app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
					var thumbsFlag
					item.isThumbs == 0 ? thumbsFlag = 1 : thumbsFlag = 0
					var params = {
						"id": item.uuid,
						"loginId": app.getUserId(),
						// "isfrom": 2,
						"isfrom": 1,
						"thumbsFlag": thumbsFlag
					};
					network.post(uri, params, 'form').then(res => {
						if (res.code == 200) {
							item.thumbsNum = item.thumbsNum + (!item.isThumbs ? 1 : -1);
							item.isThumbs = !item.isThumbs;
							if(that.hotList.length>0 &&that.hotList[0].firstComment){
								if ( that.hotList[0].firstComment.uuid == item.uuid) {
									that.hotList[0].firstComment.thumbsNum = item.thumbsNum
									that.hotList[0].firstComment.isThumbs = !item.isThumbs;
								}
							}
							
						} else {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch(res => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
						console.error(res);
					});
				} else {
					uni.setStorageSync('momentDetailId', this.uuid)
					util.jumpLogin("momentDetail")
				}
			},
			myCommentInput: function(e) {
				this.comment = e.detail.value
				if (this.comment == '' && this.fileList.length == 1) {
					this.isOk = false
				} else {
					this.isOk = true
				}
			},

			close() {
				this.$refs.popup.close()
				this.$emit('openMement', {}, false)
			},
			//图片加载错误默认图
			imgerror: function(e, img_index, type) {
				var that = this
				if (type == 'hot') {
					that.hotList.firstComment.userimages =
						"https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png"
				} else {
					that.commentList[img_index].firstComment.userimages =
						"https://dnsverify.pfmoto.com/appstatic/my/my_icon_avatar_unlogin.png"
				}

			},
			uploadPercent() {

			}
		}
	};
</script>
<style lang='scss' scoped>
	.more-comment {

		font-size: 24rpx;
		color: #ea5404;
		margin-top: 20rpx;
	}

	.titlebar {
		top: 0;
	}

	.titleText {
		color: #3D3A3A;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}

	.showMore {
		width: 24px;
		height: 24px;
		position: absolute;
		left: 44px;
		top: calc(50% - 12px);
		/*#ifdef APP-PLUS||H5*/
		left: calc(100% - 36px);
		/*#endif*/
	}

	.uploadImg {
		margin-top: 40rpx;

		.videoClass {
			width: 100%;

			#myVideo {
				width: 100%;
			}
		}

		.imageList {
			margin: 6rpx 6rpx 0 0;
			display: inline-block;
			position: relative;

			.image {
				width: 216rpx;
				height: 216rpx;
				display: inline-block;
				border-radius: 20rpx;
			}

			.delImg {
				position: absolute;
				right: 8rpx;
				top: 8rpx;
				width: 40rpx;
				height: 40rpx;
				z-index: 2;
			}
		}

		.onlyImageList {
			.onlyImage {
				width: 100%;
				display: inline-block;
			}
		}
	}

	/deep/.z-paging-content {
		background-color: #ffffff;
	}

	.uploadBtn {
		width: 216rpx;
		height: 216rpx;
		border-radius: 20rpx;
		display: inline-block;
	}

	.active {
		color: #ea5454 !important;
	}

	.topic-detail {
		overflow-y: scroll;
	}

	.videoView {
		width: 672rpx;
		height: 522rpx;
		border-radius: 20rpx;
		display: inline-block;
		margin-bottom: 100rpx;
	}

	page {
		background: #f7f8fa;
		overflow-y: auto;
	}

	.upload-img image {
		width: 40rpx;
		height: 36rpx;
		margin-right: 20rpx;
		margin-top: 8rpx;
	}

	.play {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.share-wraper {
		display: flex;

		justify-content: space-around;
		padding: 80rpx;
	}

	.share-wraper .item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-wraper .item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}

	.share-wraper .item text {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;
		letter-spacing: -0.24px;
		color: #3D3A3A;
	}

	.play image {
		display: block;
		transform: translate(-50%, -50%);
		position: absolute;
		left: 50%;
		top: 50%;
	}

	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}

	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}

	.container {
		background-color: #ffffff;
		height: calc(100vh - 88rpx);
		justify-content: flex-start;

		display: flex;
		flex-direction: column;
	}

	.contentView {
		/*#ifdef MP-WEIXIN*/
		/* margin-top: 88px; */
		/*#endif*/
		/*#ifdef APP-PLUS||H5*/
		/* margin-top: 44px; */
		/*#endif*/
		overflow-y: scroll;
	}

	.tag {
		border-radius: 33px;
		border: 1px solid #bdbdbd;
		background-color: #FFFFFF;
		font-size: 10px;
		color: #bdbdbd;
		display: inline-block;
		padding: 2px 15px;
		margin-bottom: 10px;
		margin-right: 10px;
		margin-top: 30rpx;
	}

	.comm_top {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		padding-top: 14rpx;
	}

	.comm_top image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		margin-right: 26rpx;
		flex-shrink: 0;
	}

	.comm_top .tis view:first-of-type {
		font-size: 32rpx;
		line-height: 38rpx;
		font-weight: 400;
	}

	.comm_top .tis view:last-of-type {
		font-size: 20rpx;
		line-height: 24rpx;
		color: #bdbdbd;
		padding-top: 10rpx;
	}

	.comm_pic {
		position: relative;
	}

	.comm_pic image {
		width: 215rpx;
		height: 168rpx;
		margin-bottom: 12rpx;
		/* margin-right: 12rpx; */
	}

	.comm_pic image:nth-child(3n + 0) {
		margin-right: 0;
	}

	.comm_tips {
		padding-top: 48rpx;
	}

	.comm_tips text {
		min-width: 132rpx;
		height: 48rpx;
		/* background: #acb8c6; */
		border-radius: 8rpx;
		color: #BDBDBD;
		font-size: 28rpx;
		line-height: 48rpx;
		text-align: center;
		display: inline-block;
		margin-right: 15rpx;
	}

	.comm_bottom {
		padding-top: 14rpx;
		display: flex;
		font-size: 24rpx;
		color: #bdbdbd;
		justify-content: flex-start;
	}

	.comm_bottom view {
		margin-right: 40rpx;
		display: flex;
		align-items: center;
	}

	.comm_bottom image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.comm_bottom image:first-of-type {
		width: 28rpx;
		height: 28rpx;
	}

	.comm_bottom image:last-of-type {
		width: 30rpx;
		height: 30rpx;
	}

	.Community_cont {
		padding: 36rpx;
		background: #fff;

	}

	.comm_bottom {
		padding-bottom: 40rpx;
		border-bottom: 1px solid #E0E0E0;
	}

	.tits {
		color: #636363;
		font-size: 28rpx;
		line-height: 160%;
		max-width: 100%;
		text-align: justify;
		word-break: break-word;
	}

	.more {
		padding: 80rpx 0;
		text-align: center;
	}

	.more image {
		width: 270rpx;
		height: 48rpx;
	}

	.pic_one image {
		width: 100%;
		height: 168rpx;
	}

	.Community_cont:last-of-type {
		margin-bottom: 0;
	}

	.pl_list {
		background: #fff;
		padding: 40rpx;
		padding-bottom: 160rpx;
	}

	.pl_list .h1 {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		line-height: 40rpx;
		padding-bottom: 40rpx;
	}

	.pl_cont {
		padding: 0;
		display: flex;
		margin-bottom: 40rpx;
	}

	.tx {
		height: 96rpx;
	}

	.pl_cont .tx image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		margin-right: 26rpx;
	}

	.zan {
		width: 24rpx;
		height: 24rpx;
	}

	.pl_cont .news text {
		display: block;
		font-size: 28rpx;
		line-height: 40rpx;
		/* overflow: hidden; */
		/* text-overflow: ellipsis; */
		/* white-space: nowrap; */
		word-break: break-word;
	}

	.news {
		width: 432rpx;
	}

	.pl_cont .news text:first-of-type {
		font-size: 28rpx;
		line-height: 40rpx;
		padding-bottom: 10rpx;
		color: #828282;
	}

	.pl_cont .news text:last-of-type {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #bdbdbd;
		padding-top: 10rpx;
	}

	.zs {
		display: flex;
		width: 96rpx;
		height: 96rpx;
		text-align: center;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.zs text {
		font-size: 24rpx;
		line-height: 30rpx;
		color: #bdbdbd;
		display: block;
	}

	.wp_zs {
		position: absolute;
		right: 60rpx;
	}

	.wp_zs image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 0;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		padding-top: 10px;
		padding-bottom: 10px;

		display: flex;
		padding-right: 23px;
		align-items: center;
	}

	.inputGreybg {
		background-color: #F7F8FA;
		line-height: 68rpx;
		height: 68rpx;
		/* width: 550rpx; */
		position: relative;
		margin: auto;
		border: none;
		border-radius: 4rpx;
		font-size: 32rpx;
		color: #333333;
		width: calc(100% - 190rpx);
		flex-direction: row;
		display: flex;
		align-items: center;

	}

	.dots {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 60rpx;
		height: 30rpx;
		background-color: rgba(0, 0, 0, .6);
		border-radius: 30rpx;
		text-align: center;
		color: #ffffff;
		font-size: 20rpx;
		line-height: 30rpx;
	}

	.banner {
		position: relative;
		margin-bottom: 30rpx;
	}

	.banner image {
		border-radius: 20rpx;
	}

	.myComment {
		color: #BDBDBD;
		font-size: 24rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: 100%;
	}

	.login-button {

		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		display: flex;
		align-items: center;


		color: #ADB0AE;
	}

	/* //原生的按钮就是这样难改 */
	button.login-button[plain] {
		border: 0;
		background-color: #333333;
		color: #ffffff;
		font-size: 32rpx;
	}

	.item_party_imageFlex {
		justify-content: space-between;
		display: flex;
		flex-wrap: wrap;
	}

	.item_party_imageFlex:after {
		content: "";
		width: 30%;
		height: 0px;
		visibility: hidden;
	}

	.greybg {
		margin: auto;
		border: none;
		background-color: #F7F8FA;
		border-radius: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		padding: 20rpx;
		margin-top: 40rpx;
	}

	.all-footer {
		font-size: 28rpx;
		line-height: 76rpx;
		color: #ADB0AE;
		text-align: center;
		margin-top: 50rpx;
	}

	.vertical {
		display: flex;
		flex-direction: column
	}

	.no_commentImage {

		width: 101rpx;
		height: 61rpx;
		margin: 20rpx;
	}

	.no_commentText {
		font-size: 24rpx;
		color: #C4C4C4;

		margin-bottom: 20rpx;
	}

	/deep/.zp-paging-container {
		padding-bottom: 120rpx;
	}

	.comments-pop {
		width: 100vw;
		color: #3D3A3A;
		font-size: 28rpx;
		background: #ffffff;

		.pop-con {
			width: 100%;
			position: relative;
			box-sizing: border-box;
			padding: 0rpx 32rpx 60rpx;
			background: #fff;
			border-radius: 4px 4px 0px 0px;




			.con-title {
				width: 100%;
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
				font-size: 32rpx;
				height: 112rpx;

				line-height: 112rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #fff;
				opacity: 1;
				z-index: 99;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.hot-com,
			.new-com {
				.com-title {
					margin: 32rpx 0 16rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 28rpx;
					line-height: 40rpx;
					/* identical to box height */

					padding-bottom: 20rpx;

					color: #000000;
				}

				.com-list {
					.l-first {
						display: flex;
						justify-content: space-between;
						padding-top: 32rpx;

						.header-img {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
						}

						.list-con {
							flex: 1;
							padding-left: 32rpx;
							line-height: 40rpx;
							margin-top: 6rpx;

							.list-name {
								font-family: 'PingFang SC';
								font-style: normal;
								font-weight: 500;
								font-size: 28rpx;
								line-height: 40rpx;
								/* identical to box height */



								color: #000000;
							}

							.list-content {
								margin-top: 16rpx;
								font-family: 'PingFang SC';
								font-style: normal;
								font-weight: 500;
								font-size: 28rpx;
								line-height: 40rpx;
								/* identical to box height */

								display: flex;
								align-items: center;

								/* 力帆-黑 */

								color: #3D3A3A;
								word-break: break-all;

							}

							.list-img {
								width: 200rpx;
								width: 200rpx;
								margin: 20rpx 0 0 0;
							}

							.list-num {
								font-family: 'PingFang SC';
								font-style: normal;
								font-weight: 500;
								font-size: 12px;
								line-height: 17px;
								display: flex;
								align-items: center;
								color: #ADB0AE;
								margin-top: 10px;
								padding-left: 4rpx;
								justify-content: flex-start;
							}

							.list-num text {
								margin-right: 10rpx;

							}
						}

						.like-box {
							.like-img {
								width: 34rpx;
								height: 34rpx;
								vertical-align: middle;
							}

							.like-num {
								display: inline-block;
								font-size: 24rpx;
								color: #ADB0AE;
								margin-left: 4rpx;
								position: relative;
								top: 3px;
							}
						}

					}

					.sub {
						padding-left: 96rpx;
					}
				}
			}



			.input-box {
				width: 100%;
				height: 108rpx;
				display: flex;
				align-items: center;
				position: fixed;
				bottom: 100rpx;
				left: 0;
				background-color: #fff;
				z-index: 99;

				input {
					flex: 1;
					background: #EDEDED;
					border-radius: 4rpx;
					height: 68rpx;
					line-height: 68rpx;
					margin-left: 32rpx;
					padding-left: 32rpx;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin: 0 32rpx;
				}

				.send {
					font-size: 32rpx;
					line-height: 44rpx;
					color: #ADB0AE;
					margin-right: 32rpx;
				}
			}
		}
	}
</style>
